﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <link href="../../Scripts/ext-4.0.7-gpl/resources/css/ext-all.css" type="text/css"
        rel="Stylesheet" />
    <script src="../../Scripts/ext-4.1-beta/ext-all-debug-w-comments.js" type="text/javascript"
        language="javascript"></script>
    <script type="text/javascript" language="javascript" src="../../Scripts/Schedular/kaseya-lang-en_US.js"></script>
    <script language="javascript" type="text/javascript">
            Ext.Loader.setConfig({ enabled: true });
            Ext.namespace('Kaseya.Commons');

            var inputValuesSet = {
                CONTINUOUS: { value: 'CONTINUOUS' },
                Once: { value: 'ONCE' },
                MINUTELY: { value: 'MINUTES', index: 1 },
                HOURLY: { value: 'HOURLY', index: 2 },
                DAILY: { value: 'DAILY', index: 3 },
                WEEKLY: { value: 'WEEKLY' },
                MONTHLY: { value: 'MONTHLY' },
                YEARLY: { value: 'YEARLY' },

                /**
                * Distribution Window interval constants used internally to the scheduler control
                */
                MINUTES: 1,
                HOURS: 2,
                DAYS: 3
            };

            Ext.define('Kaseya.Commons.Scheduler', {
                extend: 'Ext.panel.Panel',

                _recurrenceItems: [],
                _mainOptionItmes: [],
                _disableDistributionWindow: false,

                //Default Proberties:------------------------------------------------------------------------------------------------
                bodyBorder: false,
                border: false,
                defaults: { bodyBorder: false, border: false },
                bodyStyle: 'padding: 2px 2px 2px 2px',
                closable: false,
                frame: true,
                layout: 'hbox',
                autoHeight: true,
                autoWidth: true,
                defaultRecurrence: 'Once',
                defaultDateFormat: 'd-M-y',
                defaultTimeFormat: 'H:i:s',
                defaultDateTimeFormat: 'H:i:s d-M-y',
                defaultAlternateFormats: 'c|g:i:s a d-M-y|d-M-y|g:i:s a|H:i:s|Y-m-d H:i:s|m/d/Y H:i:s|Y-m-d\\TH:i:s|m/d/Y|n/j/Y|' +
                'n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|m/d/Y H:i:s A|n/j/Y H:i:s A|n/j/Y G:i:s A',

                buttons: [{ text: 'Submit', scope: this, handler: function () {
                    var recurrenceForm = Ext.getCmp('recurrenceForm').getForm();
                    recurrenceValues = recurrenceForm.getValues();

                    mainForm = Ext.getCmp('mainForm').getForm();
                    mainFormValues = mainForm.getValues();

                    mainFormValues.recurrence = recurrenceValues.recurrence;

                    var encodedParams = Ext.encode(mainFormValues);
                    alert(encodedParams);
                }
                }],

                //Default Objects:---------------------------------------------------------------------------------------------------

                _continuous: {
                    xtype: 'radio',
                    name: 'recurrence',
                    frame: true,
                    bodyBorder: false,
                    boxLabel: Ext.ux.LangMgr.SchedulerControl.ContinuousRecurrenceLabel,
                    checked: false,
                    hidden: false,
                    inputValue: inputValuesSet.CONTINUOUS.value
                },

                _once: {
                    xtype: 'radio',
                    name: 'recurrence',
                    frame: true,
                    bodyBorder: false,
                    boxLabel: Ext.ux.LangMgr.SchedulerControl.OnceRecurrenceLabel,
                    checked: false,
                    hidden: false,
                    inputValue: inputValuesSet.Once.value
                },

                _minutes: {
                    xtype: 'radio',
                    name: 'recurrence',
                    frame: true,
                    bodyBorder: false,
                    boxLabel: Ext.ux.LangMgr.SchedulerControl.MinutelyRecurrenceLabel,
                    checked: false,
                    hidden: false,
                    inputValue: inputValuesSet.MINUTELY.value,
                    listeners: { change: function () { this.ownerCt.ownerCt.ownerCt.ownerCt.ownerCt.onRecurrencePatternChanged; } }
                },

                _hourly: {
                    xtype: 'radio',
                    name: 'recurrence',
                    frame: true,
                    bodyBorder: false,
                    boxLabel: Ext.ux.LangMgr.SchedulerControl.HourlyRecurrenceLabel,
                    checked: false,
                    hidden: false,
                    inputValue: inputValuesSet.HOURLY.value
                },

                _daily: {
                    xtype: 'radio',
                    name: 'recurrence',
                    frame: true,
                    bodyBorder: false,
                    boxLabel: Ext.ux.LangMgr.SchedulerControl.DailyRecurrenceLabel,
                    checked: false,
                    hidden: false,
                    inputValue: inputValuesSet.DAILY.value
                },

                _weekly: {
                    xtype: 'radio',
                    name: 'recurrence',
                    frame: true,
                    bodyBorder: false,
                    boxLabel: Ext.ux.LangMgr.SchedulerControl.WeeklyRecurrenceLabel,
                    checked: false,
                    hidden: false,
                    inputValue: inputValuesSet.WEEKLY.value
                },

                _monthly: {
                    xtype: 'radio',
                    name: 'recurrence',
                    frame: true,
                    bodyBorder: false,
                    boxLabel: Ext.ux.LangMgr.SchedulerControl.MontlyRecurrenceLabel,
                    checked: false,
                    hidden: false,
                    inputValue: inputValuesSet.MONTHLY.value
                },

                _yearly: {
                    xtype: 'radio',
                    name: 'recurrence',
                    frame: true,
                    bodyBorder: false,
                    boxLabel: Ext.ux.LangMgr.SchedulerControl.YearlyRecurrenceLabel,
                    checked: false,
                    hidden: false,
                    inputValue: inputValuesSet.YEARLY.value
                },

                _runAt_txt: {
            },

            _everyTextField: {
        },

        _distributionWindow_txt: {
            xtype: 'numberfield',
            name: 'distribution_window_value',
            fieldLabel: Ext.ux.LangMgr.SchedulerControl.DistributionWindow,
            allowDecimals: false,
            width: 175,
            labelWidth: 125
        },

        _distributionWindowInterval_txt: {
            xtype: 'combo',
            itemId: 'distribution_window_interval',
            name: 'distribution_window_interval',
            store: new Ext.data.Store({
                fields: ['name', 'value'],
                data: [
                        { 'name': Ext.ux.LangMgr.SchedulerControl.DistributionWindowMinutes, 'value': inputValuesSet.MINUTES },
                        { 'name': Ext.ux.LangMgr.SchedulerControl.DistributionWindowHours, 'value': inputValuesSet.HOURS },
                        { 'name': Ext.ux.LangMgr.SchedulerControl.DistributionWindowDays, 'value': inputValuesSet.DAYS}]
            }),
            displayField: 'name',
            valueField: 'value',
            mode: 'local',
            value: inputValuesSet.HOURS,
            width: 50
        },

        _startOn_dateField: {
    },

    _startEndFieldSet: {

},



_recurrenceRadioGroup: Ext.create('Ext.form.RadioGroup', {
    autoWdith: true,
    autoHeight: true,
    bodyPadding: 10,
    columns: 1,
    items: []
}),

_endingAfterRadioGroup: Ext.create('Ext.form.RadioGroup', {
    autoWdith: true,
    autoHeight: true,
    bodyPadding: 10,
    columns: 1,
    fieldLabel: Ext.ux.LangMgr.SchedulerControl.EndingAfter,
    items: [{ boxLabel: Ext.ux.LangMgr.SchedulerControl.StartEndOptionNoEndDate}, { boxLabel: Ext.ux.LangMgr.SchedulerControl.StartEndOptionEndAfter}, { boxLabel: Ext.ux.LangMgr.SchedulerControl.StartEndOptionEndingAt}]
}),

_recurrenceForm: Ext.create('Ext.form.Panel', {
    id: 'recurrenceForm',
    name: 'recurrenceForm',
    autoWidth: true,
    autoHeight: true,
    bodyBorder: false,
    border: false,
    frame: true,
    scope: this,
    layout: 'auto',
    items: []
}),

_mainForm: Ext.create('Ext.form.Panel', {
    id: 'mainForm',
    name: 'mainForm',
    autoWidth: true,
    autoHeight: true,
    autoDestroy: false,
    bodyBorder: false,
    border: false,
    frame: true,
    scope: this,
    layout: 'auto',
    items: []
}),

//initComponent:-----------------------------------------------------------------------------------------------------
initComponent: function () {

    delete this.title;

    //Apply configs:
    this.applyConfig(this.initialConfig);

    if (this.disableDistributionWindow) {
        this._disableDistributionWindow = this.disableDistributionWindow;
    }


    this.initializeDefaultObjects();
    this.setDefaultRecurrence(this.defaultRecurrence);
    this.buildRecurrenceItems(this.recurrenceItems);
    this.buildRecurrenceForm();
    this.buildSchedulerMainForm(this.defaultRecurrence);

    this.items =
                [
                    {
                        xtype: 'panel',
                        frame: true,
                        defaults: { bodyBorder: false, border: false },
                        bodyBorder: false,
                        border: false,
                        bodyStyle: 'padding: 5px 5px 5px 5px',
                        flex: 1,
                        items: this._recurrenceForm
                    },
                    {
                        xtype: 'panel',
                        defaults: { bodyBorder: false, border: false },
                        flex: 2,
                        frame: true,
                        border: 0,
                        bodyBorder: false,
                        border: false,
                        bodyStyle: 'padding: 5px 5px 5px 5px',
                        items: this._mainForm
                    }
                ]
    this.wireEvents();
    this.callParent();
}, //End of initComponent

initializeDefaultObjects: function () {

    this._runAt_txt = Ext.create('Ext.form.field.Time', {
        name: 'run_at',
        fieldLabel: Ext.ux.LangMgr.SchedulerControl.RunAt,
        autoWidth: true,
        format: this.defaultTimeFormat,
        labelWidth: 125,
        anchor: '95%',
        value: Ext.Date.format(new Date(), this.defaultTimeFormat)
    });

    this._startOn_dateField = Ext.create('Ext.form.field.Date', {
        name: 'start_on',
        fieldLabel: Ext.ux.LangMgr.SchedulerControl.On,
        autoWidth: true,
        format: this.defaultDateFormat,
        labelWidth: 125,
        anchor: '95%',
        value: Ext.Date.format(new Date(), this.defaultDateFormat)
    });

    this._startEndFieldSet = Ext.create('Ext.form.FieldSet', {
        bodyBorder: false,
        frame: true,
        bodyStyle: 'padding: 5px 5px 5px 5px',
        title: Ext.ux.LangMgr.SchedulerControl.StartEndSectionTitle,
        items: [this._startOn_dateField, this._endingAfterRadioGroup]
    });

    this._everyTextField = Ext.create('Ext.form.NumberField', {
        hideTrigger: true,
        allowDecimals: false,
        name: 'run_minutely_every',
        fieldLabel: Ext.ux.LangMgr.SchedulerControl.Every,
        value: 1,
        minValue: 1,
        maxValue: 999,
        width: 200,        
        labelWidth: 125,
        anchor: '95%',
    });

},

//wireEvents:--------------------------------------------------------------------------------------------------------
wireEvents: function () {
    this._recurrenceRadioGroup.on('change', this.onRecurrencePatternChanged, this);
}, //End of wireEvents

//setDefaultRecurrence:----------------------------------------------------------------------------------------------
setDefaultRecurrence: function (recurrenceDefault) {
    if (typeof recurrenceDefault === "undefined" || (recurrenceDefault == null)) {
        this._once.checked = true;
    }
    else if (!Ext.isString(recurrenceDefault)) {
        console.log('recurrenceDefault is not a string');
        this._once.checked = true;
    }
    else if (Ext.isEmpty(recurrenceDefault)) {
        console.log('recurrenceDefault is empty. Default will be used.');
        this._once.checked = true;
    }
    else if (recurrenceDefault.length > 0) {
        var found = false;
        //check if the current value is for an visible item:
        if (typeof this.recurrenceItems !== "undefined" || this.recurrenceItems != null) {

            for (var i = 0, len = this.recurrenceItems.length; i < len; i++) {
                if (this.recurrenceItems[i] == recurrenceDefault) {
                    found = true;
                }
            }

            if (!found) {
                recurrenceDefault = (this.recurrenceItems[0]) ? this.recurrenceItems[0] : ''
            }
        }

        switch (recurrenceDefault) {
            case 'Continuous':
                this._continuous.checked = true;
                break;
            case 'Once':
                this._once.checked = true;
                break;
            case 'Minutes':
                this._minutes.checked = true;
                break;
            case 'Hourly':
                this._hourly.checked = true;
                break;
            case 'Daily':
                this._daily.checked = true;
                break;
            case 'Weekly':
                this._weekly.checked = true;
                break;
            case 'Monthly':
                this._monthly.checked = true;
                break;
            case 'Yearly':
                this._yearly.checked = true;
                break;
            default:
                //Default:
                this._once.checked = true;
                break;
        }
    }
}, //End of setDefaultRecurrence

//applyConfig:-------------------------------------------------------------------------------------------------------
applyConfig: function (configs) {

    if (typeof configs.defaultDateFormat !== "undefined" && configs.defaultDateFormat != null &&
                    Ext.isString(configs.defaultDateFormat) && !Ext.isEmpty(configs.defaultDateFormat)) {

        this.defaultDateFormat = configs.defaultDateFormat;
    }

    if (typeof configs.defaultTimeFormat !== "undefined" && configs.defaultTimeFormat != null &&
                    Ext.isString(configs.defaultTimeFormat) && !Ext.isEmpty(configs.defaultTimeFormat)) {

        this.defaultTimeFormat = configs.defaultTimeFormat;
    }

    if (typeof configs.defaultDateTimeFormat !== "undefined" && configs.defaultDateTimeFormat != null &&
                    Ext.isString(configs.defaultDateTimeFormat) && !Ext.isEmpty(configs.defaultDateTimeFormat)) {

        this.defaultDateTimeFormat = configs.defaultDateTimeFormat;
    }

    if (typeof configs.defaultAlternateFormats !== "undefined" && configs.defaultAlternateFormats != null &&
                    Ext.isString(configs.defaultAlternateFormats) && !Ext.isEmpty(configs.defaultAlternateFormats)) {

        this.defaultAlternateFormats = configs.defaultAlternateFormats;
    }

    if (typeof configs.defaultRecurrence !== "undefined" && configs.defaultRecurrence != null &&
            Ext.isString(configs.defaultRecurrence) && !Ext.isEmpty(configs.defaultRecurrence)) {

        this.defaultRecurrence = configs.defaultRecurrence;
    }

}, //End of applyConfig

//buildRecurrenceItems:----------------------------------------------------------------------------------------------
buildRecurrenceItems: function (recurrenceItems) {

    if (typeof recurrenceItems === "undefined" || (recurrenceItems == null)) {
        //use default which enables all of them:
        this._recurrenceItems = [this._continuous, this._once, this._minutes, this._hourly, this._daily, this._weekly, this._monthly, this._yearly];
    }
    else if (!Ext.isArray(recurrenceItems)) {
        console.log('recurrenceItems is not an array');
        this._recurrenceItems = [this._continuous, this._once, this._minutes, this._hourly, this._daily, this._weekly, this._monthly, this._yearly];
    }
    else if (recurrenceItems.length == 0) {
        console.log('recurrenceItems is empty. Default will be used.');
        this._recurrenceItems = [this._continuous, this._once, this._minutes, this._hourly, this._daily, this._weekly, this._monthly, this._yearly];
    }
    else if (recurrenceItems.length > 0) {
        for (var i = 0, len = recurrenceItems.length; i < len; i++) {
            switch (recurrenceItems[i]) {
                case 'Continuous':
                    this._recurrenceItems.push(this._continuous);
                    break;
                case 'Once':
                    this._recurrenceItems.push(this._once);
                    break;
                case 'Minutes':
                    this._recurrenceItems.push(this._minutes);
                    break;
                case 'Hourly':
                    this._recurrenceItems.push(this._hourly);
                    break;
                case 'Daily':
                    this._recurrenceItems.push(this._daily);
                    break;
                case 'Weekly':
                    this._recurrenceItems.push(this._weekly);
                    break;
                case 'Monthly':
                    this._recurrenceItems.push(this._monthly);
                    break;
                case 'Yearly':
                    this._recurrenceItems.push(this._yearly);
                    break;
                default:
                    //do nothing
                    break;
            }
        }
    }

}, //End of buildRecurrenceItems.

//configOnceView:----------------------------------------------------------------------------------------------------
configOnceView: function () {

    //TODO: Need to be set inside initComponent:
    this._distributionWindow_txt.hidden = this._disableDistributionWindow;
    this._distributionWindowInterval_txt.hidden = this._disableDistributionWindow;

    var onceFieldSet = {
        xtype: 'fieldset',
        bodyBorder: false,
        frame: true,
        bodyStyle: 'padding: 5px 5px 5px 5px',
        title: Ext.ux.LangMgr.SchedulerControl.OnceSectionTitle,
        items: [this._runAt_txt, this._distributionWindow_txt, this._distributionWindowInterval_txt, this._startOn_dateField]
    };
    return onceFieldSet;
}, //End of configOnceView.

configMinutesView: function () {

    var minutesFieldSet = Ext.create('Ext.form.FieldSet', {
        bodyBorder: false,
        frame: true,
        bodyStyle: 'padding: 5px 5px 5px 5px',
        title: Ext.ux.LangMgr.SchedulerControl.MinutelyOptionsSectionTitle,
        items: [this._runAt_txt, this._distributionWindow_txt, this._distributionWindowInterval_txt, this._everyTextField]
    });

    //startEndModel = this._endingAfterRadioGroup;
    return [minutesFieldSet, this._startEndFieldSet];
},

configHourlyView: function() {
    
    var hourlyFieldSet = Ext.create('Ext.form.FieldSet', {
         bodyBorder: false,
        frame: true,
        bodyStyle: 'padding: 5px 5px 5px 5px',
        title: Ext.ux.LangMgr.SchedulerControl.HourlyOptionsSectionTitle,
        items: [this._runAt_txt, this._distributionWindow_txt, this._distributionWindowInterval_txt, this._everyTextField]        
    });

    return [hourlyFieldSet, this._startEndFieldSet];
},

configDailyView: function() {
    
    var dailyFieldSet = Ext.create('Ext.form.FieldSet', {
         bodyBorder: false,
        frame: true,
        bodyStyle: 'padding: 5px 5px 5px 5px',
        title: Ext.ux.LangMgr.SchedulerControl.DailyOptionsSectionTitle,
        items: [this._runAt_txt, this._distributionWindow_txt, this._distributionWindowInterval_txt, this._everyTextField]        
    });

    return [dailyFieldSet, this._startEndFieldSet];
},

configWeeklyView: function() {
    
    var weeklyFieldSet = Ext.create('Ext.form.FieldSet', {
         bodyBorder: false,
        frame: true,
        bodyStyle: 'padding: 5px 5px 5px 5px',
        title: Ext.ux.LangMgr.SchedulerControl.WeeklyOptionsSectionTitle,
        items: [this._runAt_txt, this._distributionWindow_txt, this._distributionWindowInterval_txt, this._everyTextField]        
    });

    return [weeklyFieldSet, this._startEndFieldSet];
},

configMonthlyView: function() {
    
    var monthlyFieldSet = Ext.create('Ext.form.FieldSet', {
         bodyBorder: false,
        frame: true,
        bodyStyle: 'padding: 5px 5px 5px 5px',
        title: Ext.ux.LangMgr.SchedulerControl.MontlyOptionsSectionTitle,
        items: [this._runAt_txt, this._distributionWindow_txt, this._distributionWindowInterval_txt, this._everyTextField]        
    });

    return [monthlyFieldSet, this._startEndFieldSet];
},

configYearlyView: function() {
    
    var yearlyFieldSet = Ext.create('Ext.form.FieldSet', {
         bodyBorder: false,
        frame: true,
        bodyStyle: 'padding: 5px 5px 5px 5px',
        title: Ext.ux.LangMgr.SchedulerControl.YearlyOptionsSectionTitle,
        items: [this._runAt_txt, this._distributionWindow_txt, this._distributionWindowInterval_txt, this._everyTextField]        
    });

    return [yearlyFieldSet, this._startEndFieldSet];
},



//onRecurrencePatternChanged:----------------------------------------------------------------------------------------
onRecurrencePatternChanged: function (field, newValue, oldValue, eOpts, aa) {

    if (Ext.isArray(newValue.recurrence)) {
        return;
    }
    else if (Ext.isString(newValue.recurrence) && !Ext.isEmpty(newValue.recurrence)) {
        var me = this;
        me.buildSchedulerMainForm(newValue.recurrence);
    }

}, //End of onRecurrencePatternChanged

//buildRecurrenceForm:-----------------------------------------------------------------------------------------------
buildRecurrenceForm: function () {

    this._recurrenceRadioGroup.add(this._recurrenceItems);
    var recurrenceField = {
        xtype: 'fieldset',
        bodyBorder: false,
        title: Ext.ux.LangMgr.SchedulerControl.RecurrenceSectionTitle,
        frame: true,
        items: this._recurrenceRadioGroup
    };
    this._recurrenceForm.add(recurrenceField);
    this._recurrenceForm.doLayout(false, true);
}, //End of buildRecurrenceForm

//buildSchedulerMainForm:--------------------------------------------------------------------------------------------
buildSchedulerMainForm: function (recurrencePattern) {
    var me = this;
    switch (recurrencePattern) {
        case 'Once':
        case inputValuesSet.Once.value:
            var model = me.configOnceView();
            me._mainForm.removeAll(false);
            me._mainForm.add(model);
            break;
        case inputValuesSet.MINUTELY.value:            
            var model = me.configMinutesView();
            me._mainForm.removeAll(false);

            if(Ext.isArray(model)) {
                for(var i = 0, len = model.length; i < len; i++) {
                    me._mainForm.add(model[i]);
                }
            }
            else {
                me._mainForm.add(model);
            }          
            break;
        case inputValuesSet.HOURLY.value:            
            var model = me.configHourlyView();
            me._mainForm.removeAll(false);

            if(Ext.isArray(model)) {
                for(var i = 0, len = model.length; i < len; i++) {
                    me._mainForm.add(model[i]);
                }
            }
            else {
                me._mainForm.add(model);
            }          
            break;
        case inputValuesSet.DAILY.value:            
            var model = me.configDailyView();
            me._mainForm.removeAll(false);

            if(Ext.isArray(model)) {
                for(var i = 0, len = model.length; i < len; i++) {
                    me._mainForm.add(model[i]);
                }
            }
            else {
                me._mainForm.add(model);
            }          
            break;
         case inputValuesSet.WEEKLY.value:            
            var model = me.configWeeklyView();
            me._mainForm.removeAll(false);

            if(Ext.isArray(model)) {
                for(var i = 0, len = model.length; i < len; i++) {
                    me._mainForm.add(model[i]);
                }
            }
            else {
                me._mainForm.add(model);
            }          
            break;
        case inputValuesSet.MONTHLY.value:            
            var model = me.configMonthlyView();
            me._mainForm.removeAll(false);

            if(Ext.isArray(model)) {
                for(var i = 0, len = model.length; i < len; i++) {
                    me._mainForm.add(model[i]);
                }
            }
            else {
                me._mainForm.add(model);
            }          
            break;
        case inputValuesSet.YEARLY.value:            
            var model = me.configYearlyView();
            me._mainForm.removeAll(false);

            if(Ext.isArray(model)) {
                for(var i = 0, len = model.length; i < len; i++) {
                    me._mainForm.add(model[i]);
                }
            }
            else {
                me._mainForm.add(model);
            }          
            break;

            
    }
}, //End of buildSchedulerMainForm

//getFormData:-------------------------------------------------------------------------------------------------------
getFormData: function () {
    var recurrenceForm = this._recurrenceForm.getForm();
    values = recurrenceForm.getValues();

    var mainForm = this._mainForm.getForm();
    var encodedParams = Ext.encode(mainform.getValues());

    //values.push(mainForm.getValues());
    alert(values);
    //Ext.util.js
}

});                                       //End of define.


var sch = Ext.create('Kaseya.Commons.Scheduler', { defaultRecurrence: 'Once', disableDistributionWindow: true, defaultTimeFormat: 'g:i:s A', border: false, bodyBorder: false });

Ext.onReady(function () {
    var win = new Ext.window.Window({
        id: 'testWindow',
        frame: false,
        border: false,
        draggable: true,
        layout: 'fit',
        closable: true,
        closeAction: 'hide',
        buttonAlign: 'center',
        //autoWidth: true,
        width: 500,
        autoHeight: true,
        //height: 700,
        title: 'Lan Watch: Configure a Probe',
        items: [sch]
    });
    win.show();

});
    </script>
</head>
<body>
    <div>
    </div>
</body>
</html>
